<template>
  <h1>我是app组件</h1>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>性别:{{ sex }}</h2>
  <h2>a的值是:{{ a }}</h2>
  <button @click="sayHello">说话（vue3配置的sayHello）</button>
  <br>
  <br>
  <button @click="sayWelcome">说话（vue2配置的sayWelcome）</button>
  <br>
  <br>
  <button @click="test1">测试一下在vue2的配置中去读取vue3的数据、方法）</button>
  <br>
  <br>
  <button @click="test2">测试一下在vue3的setup配置中去读取vue2的数据、方法）</button>

</template>

<script>
// import {h} from 'vue'

export default {
  name: 'App',
  data: function () {
    return {
      sex: '男',
      a:100
    }
  },
  methods: {
    sayWelcome: function () {
      alert('欢迎来到尚硅谷学习')
    },
    //vue2中可以读取vue3的配置
    test1: function () {
      console.log(this.sex)
      console.log(this.name)
      console.log(this.age)
      console.log(this.sayHello)
    }
  },
  setup: function () {
    let name = '张三';
    let age = 18
    let a = 200;

    // eslint-disable-next-line no-unused-vars
    function sayHello() {
      alert(`我叫${name},我${age}岁了，你好啊`);
    }
    function test2() {
      console.log(name)
      console.log(age)
      console.log(sayHello)
      console.log(this.sex)
      console.log(this.sayWelcome)
    }

    //返回一个函数（常用）
    return {
      name: name,
      age: age,
      a:a,
      sayHello: sayHello,
      test2: test2,


    }

    //返回一个函数（渲染函数）
    // return () => {
    //   return h('h1', '尚硅谷')
    //
    // }

  }

}
</script>


